<template>
  <div class="detail">
    <van-sticky :offset-top="0">
      <van-nav-bar
          title="详情"
          left-arrow
          @click-left="onClickLeft"
      />
    </van-sticky>
    <div class="header">
      <h2>{{ info.title }}</h2>
      <div class="info">
        <p>
          <van-icon name="eye-o"/>
          {{ formatNumberToQff(info.viewCount)}} 阅读
        </p>
        <p>{{ formatTime(info.createTime) }}</p>
        <a class="collect" @click="unCollectNews(info)" v-if="isCollect">

          <van-icon name='like-o red'/>
        </a>
        <a class="collect" @click="collectNews(info)" v-else>

          <van-icon name='like-o'/>
        </a>
      </div>
    </div>
    <div class="descption">
      {{info.description}}
    </div>
    <div class="message">
      <h2 class="title">评论列表</h2>
      <ul class="list">
        <li class="item" v-for="ele in comments">
          <div class="left">
            <van-image
                width="50"
                height="50"
                :src="img_prefix_url + ele.userInfo.imageUrl"
            />
          </div>
          <div class="right">
            <h2>{{ ele.userName}}</h2>
            <p class="time">{{ formatTime(ele.createTime) }}</p>
            <div class="infos">
              {{ ele.content}}
            </div>
          </div>
        </li>
      </ul>
      <van-pagination @change="getPageComments" v-model="currentPage" :total-items="total"
                      :items-per-page="size"/>
    </div>
    <div class="markup">
      <h2 class="title">评论</h2>
      <van-form @submit="onSubmit">
        <van-field
            :disabled="info._id ? false : true"
            v-model="markup"
            name="markup"
            rows="3"
            autosize
            type="textarea"
            maxlength="150"
            placeholder="请输入留言"
            show-word-limit
            :rules="[{ required: true, message: '请填写留言信息' }]"
        />
        <div style="margin: 10px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, toRefs, computed, watch} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {
  getNewsInfoById, addCommentToNews, getCommentsByNewsId, cancelCollect,
  collectNewsList, getCollectNewsList
} from "../api/news";
import {formatTime} from "../utils/date";
import {formatNumberToQff} from "../utils/number";

const img_prefix_url ='https://yw.52kfw.cn'
const route=useRoute()
const state = reactive({
  id:'' as any,
  info:{},
  markup:'',
  comments:[] as any[],
  currentPage:1,
  total:1,
  size:5,
  uid:'',
  collectIds:[],
  isCollect:false
})
let {id,info,markup,comments,currentPage,total,size,uid,collectIds,isCollect} = toRefs(state)
id.value =route.query.id
uid.value = localStorage.getItem('id')
const getNewsInfo =async (id:string) =>{
  let response = await getNewsInfoById(id)
  info.value = response.data.info
}
const router = useRouter()
const onClickLeft =()=>{
  router.back()
}
const getComments = async (id:string)=>{
  let response = await getCommentsByNewsId({newsId:id})
  console.log('获取新闻评论列表：',response)
  comments.value = response.data.commentList
  total.value=response.data.total
}
const onSubmit = async (values) => {
  console.log('submit', values);
  let response = await addCommentToNews({content:values.markup,newsId:id.value})
  getComments(id.value)
  markup.value=''
};

const getPageComments = async ()=>{
  console.log('getPageComments',currentPage.value)
  let response = await getCommentsByNewsId({newsId: id.value,currentPage:currentPage.value})
  comments.value = response.data.commentList
  total.value=response.data.total
}
const unCollectNews = async (info) =>{
  if (uid.value == ''){
    return
  }
  let res = await cancelCollect(uid.value,info._id)
  collectList(uid.value)
}
const collectNews = async (info) =>{
  if (uid.value == ''){
    return
  }
  let res = await collectNewsList(uid.value,info._id)
  collectList(uid.value)
}
const collectList = async(uid)=>{
  let res = await getCollectNewsList(uid)
  collectIds.value = res.data.collectionList.collectNewsIds ? res.data.collectionList.collectNewsIds : []
}
getNewsInfo(id.value)
getComments(id.value)
collectList(uid.value)
watch(collectIds,async(newVal,oldVal)=>{
 // let res = await getCollectNewsList(uid.value)
 // collectIds.value = res.data.collectionList.collectNewsIds ? res.data.collectionList.collectNewsIds : []
  isCollect.value=collectIds.value.includes(id.value)




})
</script>

<style scoped lang="less">
.detail {
  background-color: #fff;
  margin-bottom: 1.1rem;
.header {
  background-color: #fff;
  padding: 0.3rem;
h2 {
  line-height: 1.4;
  font-size: 0.6rem;
  margin-bottom: 0.2rem;
}
.info {
  display: flex;
  align-items: center;
p {
  margin-right: 0.15rem;
}
.collect {
  font-size: 0.5rem;
}
.red {
  color: #f00;
}
}
}
.descption {
  border-top: 2px solid #999;
  background-color: #fff;
  padding: 0.3rem;
  line-height: 1.5;
  text-indent: 2em;
p {
  margin-bottom: 0.1rem;
}
}
.message {
.list {
.item {
  display: flex;
  border-bottom: 1px solid #e4e4e4;
  padding: 0.2rem 0;
.left {
  margin-right: 0.3rem;
}
.right {
  flex: 1;
> h2 {
  font-size: 0.38rem;
  color: #b8b8b8;
}
> p.time {
  padding: 0.3rem 0;
  font-size: 0.28rem;
}
.infos {
  line-height: 1.3;
  color: #000;
  font-size: 0.3rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
}
}
}
}
.markup, .message {
  padding: 0.3rem;
.title {
  font-size: 0.6rem;
  padding: 0.3rem 0;
}
}
}
</style>
